<template>
    <div class="HomePage">
        <div class="head">
            <el-button icon="el-icon-download" @click="exportToPDF">Download</el-button>
        </div>
        <div style="display: flex;" class="All-Box">
            <div class="ShowBox">
                <ShowIt ref="content" :ObjInput="ObjInput" :ShowObj="ShowObj" @ScrollChange="ScrollChange"></ShowIt>
            </div>
            <div class="EditBox">
                <div class="firstInput">
                    <el-card class="box-card">
                        <div class="box-one Name">
                            <span class="title">Name</span>
                            <el-input v-model="ObjInput.title" placeholder="Name"></el-input>
                        </div>
                        <div class="box-one Objective">
                            <span class="title">Objective</span>
                            <el-input type="textarea" :autosize="true" resize="none" :rows="2"
                                placeholder="Entrepreneur and educator obsessed with making education free for anyone"
                                v-model="ObjInput.Objective">
                            </el-input>
                        </div>
                        <div class="box-two">
                            <div class="two-left Email">
                                <span class="title">Email</span>
                                <el-input v-model="ObjInput.Email" placeholder="Email"></el-input>
                            </div>
                            <div class="two-right Phone">
                                <span class="title">Phone</span>
                                <el-input v-model="ObjInput.Phone" placeholder="Phone"></el-input>
                            </div>
                        </div>
                        <div class="box-two">
                            <div class="two-left Website">
                                <span class="title">Website</span>
                                <el-input v-model="ObjInput.Website" placeholder="Website"></el-input>
                            </div>
                            <div class="two-right Location">
                                <span class="title">Location</span>
                                <el-input v-model="ObjInput.Location" placeholder="Location"></el-input>
                            </div>
                        </div>
                    </el-card>
                </div>
                <template v-for="(objKey, ObjIndex) in ShowObj">
                    <div class="box-all-center">
                        <div :class="objKey.type">
                        <el-card :class="['WORK', 'EDUCATION', 'PROJECT'].includes(objKey.type) ? 'change-btn' : ''"
                            class="box-card" style="padding-bottom: 20px;">
                            <div class="edit-title" :style="{ color: !objKey.Show ? 'rgb(156 163 175)' : '' }">
                                <div class="edit-left">
                                    <span v-html="getSelecIcon(objKey.type)"></span>
                                    <el-input v-model="objKey.Title" :placeholder="objKey.Title"></el-input>
                                </div>
                                <div class="edit-right">
                                    <span @click="BigDescending(ObjIndex, objKey.type)"
                                        v-if="ObjIndex != ShowObj.length - 1">
                                        <el-tooltip class="item" effect="dark" content="Move Dwon" placement="top-start">
                                            <i class="el-icon-bottom"></i>
                                        </el-tooltip>
                                    </span>
                                    <span @click="BigAscending(ObjIndex, objKey.type)"
                                        v-if="ObjIndex == ShowObj.length - 1 || ObjIndex > 0">
                                        <el-tooltip class="item" effect="dark" content="Move Up" placement="top-start">
                                            <i class="el-icon-top"></i>
                                        </el-tooltip>
                                    </span>
                                    <span v-if="objKey.Show" @click="objKey.Show = false">
                                        <el-tooltip class="item" effect="dark" content="Hide section" placement="top-start">
                                            <i class="el-icon-view"></i>
                                        </el-tooltip>
                                    </span>
                                    <template v-else>
                                        <el-tooltip class="item" effect="dark" content="Show section" placement="top-start">
                                            <span v-html="getSelecIcon('HideIcon')" @click="objKey.Show = true"></span>
                                        </el-tooltip>
                                    </template>
                                </div>
                            </div>
                            <template v-if="objKey.Show">
                                <template v-if="objKey.type == 'WORK'">
                                    <div class="work-one WORK" v-for="(item, index) in objKey.data" :key="index"
                                        :style="index > 0 ? 'border-top: 1px dashed #DCDFE5;' : ''">
                                        <div class="box-two">
                                            <div class="two-left">
                                                <span class="title">Company</span>
                                                <el-input v-model="item.Company" placeholder="Company"></el-input>
                                            </div>
                                            <div class="two-right">
                                                <div class="title-del">
                                                    <span class="title">Job Title</span>
                                                    <p v-if="objKey.data.length > 1">
                                                        <span v-if="index > 0 || index == objKey.data.length - 1"
                                                            @click="Ascending(ObjIndex, index, index - 1, objKey.type)">
                                                            <i class="el-icon-top"></i>
                                                        </span>
                                                        <span v-if="index != objKey.data.length - 1"
                                                            @click="Descending(ObjIndex, index, index + 1, objKey.type)">
                                                            <i class="el-icon-bottom"></i>
                                                        </span>
                                                        <span @click="DeleteObj(ObjIndex, index)">
                                                            <i class="el-icon-delete"></i>
                                                        </span>
                                                    </p>
                                                </div>
                                                <el-input v-model="item.Job_Title" placeholder="Job_Title"></el-input>
                                            </div>
                                        </div>
                                        <div class="box-one">
                                            <span class="title">Date</span>
                                            <el-date-picker
                                                v-model="item.Date"
                                                style="width: 100%;"
                                                type="daterange"
                                                value-format="yyyy-MM-dd"
                                                range-separator="-"
                                                start-placeholder="Start date"
                                                end-placeholder="End date">
                                            </el-date-picker>
                                        </div>
                                        <div class="box-one">
                                            <span class="title">Description</span>
                                            <div class="work-Description">
                                                <MyInput :line="item.line" :hideIt="item.hideIt"
                                                    :ref="`WORK${index}-MyInput`" :value="item.Description"
                                                    @input="(val) => InputShowIt(val, index, 'WORK', 'Description', ObjIndex)"
                                                    @InputKeyDown="(val) => InputKeyDown(val, `WORK${index}-MyInput`, index, 'WORK', 'Description', ObjIndex)">
                                                </MyInput>
                                            </div>
                                        </div>
                                        <div class="box-one">
                                            <span class="title">Modification</span>
                                            <el-input type="textarea" :autosize="true" resize="none" :rows="2"
                                                placeholder="modification" v-model="item.modification">
                                            </el-input>
                                        </div>
                                    </div>
                                    <el-button icon="el-icon-plus" @click="AddOneProject(ObjIndex, 'work')">Add
                                        Job</el-button>
                                </template>
                                <template v-else-if="objKey.type == 'EDUCATION'">
                                    <div :style="index > 0 ? 'border-top: 1px dashed #DCDFE5;' : ''"
                                        class="EDUCATION work-one" v-for="(item, index) in objKey.data" :key="index">
                                        <div class="box-two">
                                            <div class="two-left">
                                                <span class="title">School</span>
                                                <el-input v-model="item.School" placeholder="School"></el-input>
                                            </div>
                                            <div class="two-right">
                                                <div class="title-del">
                                                    <span class="title">Date</span>
                                                    <p v-if="objKey.data.length > 1">
                                                        <span v-if="index > 0 || index == objKey.data.length - 1"
                                                            @click="Ascending(ObjIndex, index, index - 1, objKey.type)">
                                                            <i class="el-icon-top"></i>
                                                        </span>
                                                        <span v-if="index != objKey.data.length - 1"
                                                            @click="Descending(ObjIndex, index, index + 1, objKey.type)">
                                                            <i class="el-icon-bottom"></i>
                                                        </span>
                                                        <span @click="DeleteObj(ObjIndex, index)">
                                                            <i class="el-icon-delete"></i>
                                                        </span>
                                                    </p>
                                                </div>
                                                <!-- <el-input v-model="item.Date" placeholder="Date"></el-input> -->
                                                <el-date-picker
                                                    v-model="item.Date"
                                                    style="width: 100%;"
                                                    type="daterange"
                                                    value-format="yyyy-MM-dd"
                                                    range-separator="-"
                                                    start-placeholder="Start date"
                                                    end-placeholder="End date">
                                                </el-date-picker>
                                            </div>
                                        </div>
                                        <div class="box-two">
                                            <div class="two-left">
                                                <span class="title">Degree & Major</span>
                                                <el-input v-model="item.Degree_Major"
                                                    placeholder="Degree_Major"></el-input>
                                            </div>
                                            <div class="two-right">
                                                <span class="title">GPA</span>
                                                <el-input v-model="item.GPA" placeholder="GPA"></el-input>
                                            </div>
                                        </div>
                                        <div class="box-one">
                                            <span class="title">Additional Information (Optional)<i
                                                    class="el-icon-s-operation" :class="item.hideIt ? '' : 'click-i'"
                                                    @click="item.hideIt = !item.hideIt"></i></span>
                                            <div class="education-Additional_Information">
                                                <MyInput :line="item.line" :hideIt="item.hideIt"
                                                    :ref="`EDUCATION${index}-MyInput`" :value="item.Description"
                                                    @input="(val) => InputShowIt(val, index, 'EDUCATION', 'Description', ObjIndex)"
                                                    @InputKeyDown="(val) => InputKeyDown(val, `EDUCATION${index}-MyInput`, index, 'EDUCATION', 'Description', ObjIndex)">
                                                </MyInput>
                                            </div>
                                        </div>
                                    </div>
                                    <el-button icon="el-icon-plus" @click="AddOneProject(ObjIndex, 'education')">Add
                                        School</el-button>
                                </template>
                                <template v-else-if="objKey.type == 'PROJECT'">
                                    <div :style="index > 0 ? 'border-top: 1px dashed #DCDFE5;' : ''"
                                        class="PROJECT work-one" v-for="(item, index) in objKey.data" :key="index">
                                        <div class="box-two">
                                            <div class="two-left">
                                                <span class="title">Project Name</span>
                                                <el-input v-model="item.Project_Name"
                                                    placeholder="Project_Name"></el-input>
                                            </div>
                                            <div class="two-right">
                                                <div class="title-del">
                                                    <span class="title">Date</span>
                                                    <p v-if="objKey.data.length > 1">
                                                        <span v-if="index > 0 || index == objKey.data.length - 1"
                                                            @click="Ascending(ObjIndex, index, index - 1, objKey.type)">
                                                            <i class="el-icon-top"></i>
                                                        </span>
                                                        <span v-if="index != objKey.data.length - 1"
                                                            @click="Descending(ObjIndex, index, index + 1, objKey.type)">
                                                            <i class="el-icon-bottom"></i>
                                                        </span>
                                                        <span @click="DeleteObj(ObjIndex, index)">
                                                            <i class="el-icon-delete"></i>
                                                        </span>
                                                    </p>
                                                </div>
                                                <!-- <el-input v-model="item.Date" placeholder="Date"></el-input> -->
                                                <el-date-picker
                                                    v-model="item.Date"
                                                    style="width: 100%;"
                                                    type="daterange"
                                                    value-format="yyyy-MM-dd"
                                                    range-separator="-"
                                                    start-placeholder="Start date"
                                                    end-placeholder="End date">
                                                </el-date-picker>
                                            </div>
                                        </div>
                                        <div class="box-one">
                                            <span class="title">Description</span>
                                            <div class="project-description">
                                                <MyInput :line="item.line" :hideIt="item.hideIt"
                                                    :ref="`PROJECT${index}-MyInput`" :value="item.Description"
                                                    @input="(val) => InputShowIt(val, index, 'PROJECT', 'Description', ObjIndex)"
                                                    @InputKeyDown="(val) => InputKeyDown(val, `PROJECT${index}-MyInput`, index, 'PROJECT', 'Description', ObjIndex)">
                                                </MyInput>
                                            </div>
                                        </div>
                                    </div>
                                    <el-button icon="el-icon-plus" @click="AddOneProject(ObjIndex, 'project')">Add
                                        Project</el-button>
                                </template>
                                <template v-else-if="objKey.type == 'SKILLS'">
                                    <div class="box-one SKILLS" style="margin-bottom: 20px;">
                                        <span class="title">Skills List <i class="el-icon-s-operation"
                                                :class="objKey.hideIt ? '' : 'click-i'"
                                                @click="objKey.hideIt = !objKey.hideIt"></i></span>
                                        <div class="Skills_List">
                                            <MyInput :line="objKey.line" :hideIt="objKey.hideIt" ref="Skills_List"
                                                :value="objKey.Description"
                                                @input="(val) => InputShowIt(val, -1, 'SKILLS', 'Description', ObjIndex)"
                                                @InputKeyDown="(val) => InputKeyDown(val, `Skills_List`, -1, 'SKILLS', 'Description', ObjIndex)">
                                            </MyInput>
                                        </div>
                                    </div>
                                    <div class="skill-bottom">
                                        <p class="bottom-title">Featured Skills (Optional)</p>
                                        <p class="bottom-description">Featured skills is optional to highlight top
                                            skills,
                                            with
                                            more circles mean higher proficiency.</p>
                                        <div class="skill-bottom-featured">
                                            <div class="featured-one" v-for="(item, index) in objKey.FeaturedList"
                                                :key="index">
                                                <el-input style="margin-right: 5px;width: calc(100% - 125px);"
                                                    v-model="item.name"
                                                    :placeholder="`Featured Skill ${index + 1}`"></el-input>
                                                <el-rate
                                                    :colors="[ObjInput.ChangeColor, ObjInput.ChangeColor, ObjInput.ChangeColor]"
                                                    v-model="item.score"></el-rate>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="box-one" style="margin-bottom: 20px;">
                                        <span class="title">Custom Textbox <i class="el-icon-s-operation"
                                                :class="objKey.hideIt ? '' : 'click-i'"
                                                @click="objKey.hideIt = !objKey.hideIt"></i></span>
                                        <div class="Custom_Textbox">
                                            <MyInput :line="objKey.line" :hideIt="objKey.hideIt" ref="Custom_Textbox"
                                                :value="objKey.Description"
                                                @input="(val) => InputShowIt(val, -1, 'Custom', 'Description', ObjIndex)"
                                                @InputKeyDown="(val) => InputKeyDown(val, `Custom_Textbox`, -1, 'Custom', 'Description', ObjIndex)">
                                            </MyInput>
                                        </div>
                                    </div>
                                </template>
                            </template>
                        </el-card>
                    </div>
                    </div>
                </template>
                <div class="Resume-Setting">
                    <el-card class="box-card">
                        <div class="edit-title">
                            <div class="edit-left">
                                <i class="el-icon-setting"></i>
                                <span style="font-size: 18px;font-weight: 600;margin-left: 10px;">Resume Setting</span>
                            </div>
                        </div>
                        <div class="setting-one">
                            <p class="title">
                                Theme Color
                                <el-input v-model="ObjInput.ChangeColor" class="ColorText"
                                    :style="`color:${ObjInput.ChangeColor}`" placeholder="#38bdf8"></el-input>
                            </p>
                            <ul>
                                <li v-for="(item, index) in ColorList" :key="index" :style="`background-color:${item}`"
                                    @click="ColorClick(item)">
                                    <i v-if="ObjInput.ChangeColor == item" class="el-icon-check"></i>
                                </li>
                            </ul>
                        </div>
                        <div class="setting-one">
                            <p class="title">
                                Font Family
                            </p>
                            <div class="font-box">
                                <el-button v-for="(item, index) in FamilyList" :key="index" @click="FamilyClick(item)"
                                    :style="`font-family:${item};${item == ObjInput.ChangeFamily ? `background-color:${ObjInput.ChangeColor};color:#fff !important` : ''}`"
                                    class="font-btn">{{ item == 'NotoSansSC' ? '思源黑体(简体)' : item }}</el-button>
                            </div>
                        </div>
                        <div class="setting-one">
                            <p class="title">
                                Font Size (pt)
                                <el-input v-model="ObjInput.ChangeSize" class="ColorText" placeholder="10"></el-input>
                            </p>
                            <div class="font-box">
                                <el-button v-for="(item, index) in FontSizeList" :key="index"
                                    @click="FontSizeClick(item)"
                                    :style="`${item.value == ObjInput.ChangeSize ? `background-color:${ObjInput.ChangeColor};color:#fff !important` : ''}`"
                                    class="font-btn">{{ item.name }}</el-button>
                            </div>
                        </div>
                        <div class="setting-one">
                            <p class="title">
                                Document Size
                            </p>
                            <div class="font-box">
                                <el-button v-for="(item, index) in DocumentSize" :key="index"
                                    @click="DocumentClick(item)"
                                    :style="`${item.scale == ObjInput.ChangeDocumentSize.scale ? `background-color:${ObjInput.ChangeColor};color:#fff !important;height:60px` : 'height:60px'}`"
                                    class="font-btn">
                                    {{ item.name }}
                                    <p style="margin-top: 5px;">{{ item.desc }}</p>
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ShowIt from './ShowIt.vue'
import MyInput from './MyInput.vue'
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
export default {
    name: 'HomePage',
    components: {
        ShowIt,
        MyInput
    },
    data() {
        return {
            ShowObj: [
                
            {
                    type: 'EDUCATION',
                    Title: 'EDUCATION',
                    Show: true,
                    data: [
                        {
                            School: '',
                            Date: '',
                            Degree_Major: '',
                            GPA: '',
                            Description: '',
                            line: [''],
                            hideIt: false,
                        }
                    ]
                },
                
                {
                    type: 'WORK',
                    Title: "WORK EXPERIENCE",
                    Show: true,
                    ShowTitle: '',
                    data: [
                        {
                            Company: '',
                            Job_Title: '',
                            Date: '',
                            Description: '',
                            line: [''],
                            hideIt: false,
                            modification: ''
                        }
                    ]
                },
                {
                    type: 'PROJECT',
                    Title: 'PROJECT',
                    Show: true,
                    data: [
                        {
                            Project_Name: '',
                            Date: '',
                            Description: '',
                            line: [''],
                            hideIt: false,
                        }
                    ]
                },
                {
                    type: 'SKILLS',
                    Title: 'SKILLS',
                    Show: true,
                    Description: '',
                    FeaturedList: [
                        {
                            name: '',
                            score: 5
                        },
                        {
                            name: '',
                            score: 5
                        },
                        {
                            name: '',
                            score: 5
                        },
                        {
                            name: '',
                            score: 5
                        },
                        {
                            name: '',
                            score: 5
                        },
                        {
                            name: '',
                            score: 5
                        }
                    ],
                    line: [''],
                    hideIt: false,
                },
                {
                    type: 'CUSTOM',
                    Title: 'CUSTOM SECTION',
                    Show: true,
                    Description: '',
                    line: [''],
                    hideIt: false,
                }
            ],
            ColorList: ['#f87171', '#ef4444', '#fb923c', '#f97316', '#fbbf24', '#f59e0b', '#22c55e', '#15803d', '#38bdf8', '#0ea5e9', '#818cf8', '#6366f1', '#000000'],
            FamilyList: ['Roboto', 'Lato', 'Montserrat', 'OpenSans', 'Raleway', 'Caladea', 'Lora', 'RobotoSlab', 'PlayfairDisplay', 'Merriweather', 'NotoSansSC'],
            DocumentSize: [
                {
                    name: 'Letter',
                    desc: '(US, Canada)',
                    value: '816px',
                    scale: 1
                },
                {
                    name: 'A4',
                    desc: '(other countries)',
                    value: '793px',
                    scale: 0.9
                }
            ],
            FontSizeList: [
                {
                    name: 'Compact',
                    value: 10
                },
                {
                    name: 'Standard',
                    value: 11
                },
                {
                    name: 'Large',
                    value: 12
                }
            ],
            ObjInput: {
                ChangeDocumentSize: {
                    name: 'Letter',
                    desc: '(US, Canada)',
                    value: '816px',
                    scale: 1
                },
                ChangeSize: 10,
                ChangeFamily: 'Lato',
                ChangeColor: '#000000'
            }
        };
    },
    watch: {
    },
    mounted() {
        let input = document.querySelector('.ColorText .el-input__inner')
        input && (input.style.color = this.ObjInput.ChangeColor)
    },

    methods: {
        exportToPDF() {
            const element = this.$refs.content.$refs.content;
            html2canvas(element).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF();
                const imgWidth = 210;
                const pageHeight = 295;
                const imgHeight = canvas.height * imgWidth / canvas.width;
                let heightLeft = imgHeight;

                let position = 0;

                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;

                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight;
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }
                pdf.save('download.pdf');
            });
        },
        ScrollChange(item) {
            let res_Dom = document.querySelector(`.${item}`)
            let fDom = document.querySelector('.EditBox')
            fDom.scrollTo(0, res_Dom.offsetTop - 50); // 竖向
            res_Dom.children[0].classList.add('select-color')
            let timer = null
            timer = setTimeout(() => {
                if(timer){
                    clearTimeout(timer)
                    timer = null
                }
                res_Dom.children[0].classList.remove('select-color')
            }, 1000);
        },
        InputShowIt(val, index = -1, obj, type, itIndex) {
            if (index != -1) {
                this.ShowObj[itIndex].data[index][type] = val
            } else {
                this.ShowObj[itIndex][type] = val
            }
            this.$nextTick(() => {
                this.$forceUpdate()
            })
        },
        InputKeyDown(event, ref, index = -1, obj, desc, itIndex) {
            let ul = this.$refs[ref][0] ? this.$refs[ref][0].$refs.editableContainer : this.$refs[ref].$refs.editableContainer
            if (event.key === 'Enter') {
                event.preventDefault();
                let htmlString = ul.innerHTML
                let regex = /<li\b[^>]*>((?:[^<]|<(?!\/?li\b)[^>]*>)*?)<\/li>/gi;
                let matches = htmlString.match(regex);
                let liTexts = matches.map(match => {
                    let content = match.replace(/^<li[^>]*>|<\/li>$/g, '');
                    content = content.replace(/<[^>]*>/g, '');
                    return content.trim();
                });
                if (liTexts[liTexts.length - 1].replace(/&nbsp;/g, '').trim() == '') return
                if (index != -1) {
                    this.ShowObj[itIndex].data[index].line.push(' ')
                } else {
                    this.ShowObj[itIndex].line.push(' ')
                }
                this.$nextTick(() => {
                    ul = this.$refs[ref][0] ? this.$refs[ref][0].$refs.editableContainer : this.$refs[ref].$refs.editableContainer
                    this.setFocusToElement(ul.children[ul.children.length - 1])
                    this.$forceUpdate()
                });
            } else if (event.keyCode == 8) {
                ul = this.$refs[ref][0] ? this.$refs[ref][0].$refs.editableContainer : this.$refs[ref].$refs.editableContainer
                this.$nextTick(() => {
                    if (ul.children.length == 1 && ul.children[0].innerHTML.trim().replace(/\n|<br>/, '') == '') {
                        event.preventDefault();
                        return
                    }
                })
            }
        },
        setFocusToElement(element) {
            if (element) {
                let range = document.createRange();
                range.selectNode(element);
                let selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                element.focus();
            }
        },
        AddOneProject(index, type) {
            if (type == 'work') {
                this.ShowObj[index].data.push({
                    Company: '',
                    Job_Title: '',
                    Date: '',
                    Description: '',
                    line: [''],
                    hideIt: false,
                    modification: ''
                })
            } else if (type == "education") {
                this.ShowObj[index].data.push({
                    School: '',
                    Date: '',
                    Degree_Major: '',
                    GPA: '',
                    Description: '',
                    line: [''],
                    hideIt: false,
                })
            } else if (type == 'project') {
                this.ShowObj[index].data.push({
                    Project_Name: '',
                    Date: '',
                    Description: '',
                    line: [''],
                    hideIt: false,
                })
            }
        },
        DeleteObj(ObjIndex, index) {
            this.ShowObj[ObjIndex]["data"].splice(index, 1)
        },
        Ascending(ObjIndex, index, newIndex, type) {
            this.swapArrayElements(this.ShowObj[ObjIndex]['data'], index, newIndex)
            let html = this.$refs[`${type}${index}-MyInput`][0].$refs.editableContainer.innerHTML
            this.$refs[`${type}${index}-MyInput`][0].$refs.editableContainer.innerHTML =  this.$refs[`${type}${newIndex}-MyInput`][0].$refs.editableContainer.innerHTML
            this.$refs[`${type}${newIndex}-MyInput`][0].$refs.editableContainer.innerHTML = html
            this.$forceUpdate()
        },
        Descending(ObjIndex, index, newIndex, type) {
            this.swapArrayElements(this.ShowObj[ObjIndex]['data'], index, newIndex)
            let html = this.$refs[`${type}${index}-MyInput`][0].$refs.editableContainer.innerHTML
            this.$refs[`${type}${index}-MyInput`][0].$refs.editableContainer.innerHTML =  this.$refs[`${type}${newIndex}-MyInput`][0].$refs.editableContainer.innerHTML
            this.$refs[`${type}${newIndex}-MyInput`][0].$refs.editableContainer.innerHTML = html
            this.$forceUpdate()
        },
        // 大模块升序
        BigAscending(index, type) {
            let newIndex = index - 1
            if (newIndex < 0) {
                return
            }
            this.swapArrayElements(this.ShowObj, index, newIndex, type)
        },
        // 大模块降序
        BigDescending(index) {
            let newIndex = index + 1
            if (newIndex > this.ShowObj.length - 1) {
                return
            }
            this.swapArrayElements(this.ShowObj, index, newIndex, 'big')
        },
        ColorClick(item) {
            this.ObjInput.ChangeColor = item
            let input = document.querySelector('.ColorText .el-input__inner')
            input.style.color = item
        },
        FamilyClick(item) {
            this.ObjInput.ChangeFamily = item
        },
        FontSizeClick(item) {
            this.ObjInput.ChangeSize = item.value
        },
        DocumentClick(item) {
            this.ObjInput.ChangeDocumentSize = item
        },
        /**
         * 交换数组中索引为 i 和 j 的两个元素
         * @param {Array} arr - 需要操作的数组
         * @param {number} index1 - 第一个元素的索引
         * @param {number} index2 - 第二个元素的索引
         */
        swapArrayElements(arr, index1, index2, type = 'small') {
            if (index1 >= 0 && index1 < arr.length && index2 >= 0 && index2 < arr.length && index1 !== index2) {
               if(type != 'small'){
                    // let oldHtml = document.querySelectorAll('.box-all-center')[index1].innerHTML
                    // document.querySelectorAll('.box-all-center')[index1].innerHTML = document.querySelectorAll('.box-all-center')[index2].innerHTML
                    // document.querySelectorAll('.box-all-center')[index2].innerHTML = oldHtml
                    this.$nextTick(() => {
                        const temp = arr[index1];
                        this.$set(arr, index1, arr[index2]);
                        this.$set(arr, index2, temp);
                        this.$forceUpdate()
                    }) 
                }else{
                    this.$nextTick(() => {
                        const temp = arr[index1];
                        this.$set(arr, index1, arr[index2]);
                        this.$set(arr, index2, temp);
                        this.$forceUpdate()
                    }) 
               }
            } else {
                console.error('无效的索引');
            }
        },
        getSelecIcon(type) {
            if (type == 'WORK') {
                return `<i class="el-icon-school"></i>`
            } else if (type == 'EDUCATION') {
                return `<svg height="25px" width="25px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"></path></svg>`
            } else if (type == 'SKILLS') {
                return `<svg height="25px" width="25px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 11-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 016.336-4.486l-3.276 3.276a3.004 3.004 0 002.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M4.867 19.125h.008v.008h-.008v-.008z"></path></svg>`
            } else if (type == 'PROJECT') {
                return `<svg height="25px" width="25px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"></path></svg>`
            } else if (type == 'CUSTOM') {
                return `<svg height="25px" width="25px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 11-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 016.336-4.486l-3.276 3.276a3.004 3.004 0 002.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M4.867 19.125h.008v.008h-.008v-.008z"></path></svg>`
            } else if (type == 'HideIcon') {
                return ` <svg height="25px" width="25px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"></path></svg>`
            }
        }
    },
};
</script>

<style lang="less" scoped>
@import './font.css';
.HomePage {
    width: 100%;
    background-color: #f4f4f8;
    overflow: auto;

    .head {
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-shadow: 1px 1px 1px #DCDFE5;
        z-index: 99999;
        position: relative;
        /deep/ .el-button--default {
            border: 1px solid #f0f0f5;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
            margin-right: 50px;
            &:hover {
                background-color: #f9fafb;
            }

            i {
                color: #333;
            }

            span {
                color: #333;
                font-weight: 600;
            }
        }
    }

    .ShowBox {
        min-width: 700px;
        max-width: 60%;
        padding: 20px;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100vh - 90px);
        margin-left: 150px;
    }

    .EditBox {
        padding: 20px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 80px;
        max-width: 680px;
        max-height: calc(100vh - 90px)
    }

    .Objective{
        /deep/ .el-textarea{
            textarea{
                min-height: 60px !important;
            }
        }
    }
    .box-one {
        width: 100%;
        margin-top: 10px;

        

        .title {
            display: inline-block;
            margin-bottom: 5px;
            color: #333;
            display: flex;
            align-items: center;

            i {
                // background-color: aqua;
                border-radius: 50%;
                height: 25px;
                width: 25px;
                color: #bcc2ca;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 5px;

                &:hover {
                    cursor: pointer;
                    background-color: #f3f4f6;
                }
            }

            .click-i {
                background-color: #e0f2fe;
                color: rgb(55 65 81 1);
            }
        }

        margin-bottom: 10px;
    }

    .title-del {
        display: flex;
        justify-content: space-between;
        color: rgb(156 163 175);

        p {
            span {
                display: inline-block;
                width: 25px;
                height: 25px;
                text-align: center;
                line-height: 25px;

                &:hover {
                    cursor: pointer;
                    background-color: #f3f4f6;
                    border-radius: 50%;
                }
            }
        }
    }

    .box-two {
        display: flex;
        margin-bottom: 10px;
        margin-top: 10px;

        .title {
            display: inline-block;
            margin-bottom: 5px;
            color: #333;
        }

        .two-left {
            width: 57%;
        }

        .two-right {
            width: 40%;
            margin-left: 3%;
        }
    }

    .edit-title {
        display: flex;
        height: 50px;
        align-items: center;

        .edit-left {
            display: flex;
            align-items: center;
            width: calc(100% - 90px);
            position: relative;

            /deep/ i {
                font-size: 25px;
            }

            /deep/ .el-input__inner {
                font-weight: 600;
                font-size: 20px;
                border: none;
                height: 28px;
                border-radius: 0;
                padding-left: 0px;
                margin-left: 8px;
                width: calc(100% - 8px);

                &:hover {
                    box-shadow: 1px 1px 1px #DCDFE5;
                }
            }

        }

        .edit-right {
            min-width: 90px;
            height: 40px;
            display: flex;
            justify-content: space-between;

            span {
                width: 40px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 25px;
                }

                &:hover {
                    cursor: pointer;
                    background-color: #f3f4f6;
                    border-radius: 50%;
                }
            }
        }
    }

    .work-one {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .change-btn {
        padding-bottom: 20px;

        /deep/ .el-button--default {
            float: right;
            border: 1px solid #f0f0f5;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

            &:hover {
                background-color: #f9fafb;
            }

            i {
                color: #333;
            }

            span {
                color: #000;
                font-weight: 600;
            }
        }
    }

    .skill-bottom {
        border-top: 1px dashed #DCDFE5;
        padding-top: 20px;

        .bottom-title {
            color: #374151;
        }

        .bottom-description {
            margin-top: 10px;
            font-size: 14px;
            color: #4b5563
        }

        .skill-bottom-featured {
            width: 100%;
            // height: 100px;
            // background-color: aqua;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;

            .featured-one {
                width: 50%;
                height: 50px;
                // background-color: orangered;
                display: flex;
                align-items: center;
                margin-bottom: 10px
            }
        }
    }

    /deep/ .el-input__inner {
        border: 1px solid #DCDFE5;
        border-radius: 5px;
    }

    /deep/ .el-textarea {
        .el-textarea__inner {
            border: 1px solid #DCDFE5;
        }
    }

    .box-card {
        min-width: 480px;
        margin-bottom: 30px;
    }

    .setting-one {
        margin-bottom: 10px;

        .title {
            font-size: 16px;
            display: flex;
            align-items: center;

            /deep/ .el-input {
                max-width: 100px;
                margin-left: 20px;
            }

            /deep/ .el-input__inner {
                border: none;
                border-bottom: 1px solid rgb(209 213 219);
                border-radius: 0;
                height: 25px;
                font-weight: 600;
                max-width: 100px;
                font-size: 18px;
                text-align: center;
            }
        }

        ul {
            display: flex;
            list-style: none;
            margin-top: 10px;
            flex-wrap: wrap;

            li {
                width: 40px;
                height: 40px;
                border-radius: 8px;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;

                i {
                    font-size: 20px;
                    color: #fff;
                }

                &:hover {
                    cursor: pointer;
                }
            }
        }

        .font-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .font-btn {
                width: 110px;
                height: 36px;
                padding: 0;
                margin-top: 10px;
                float: none;
                margin-left: 0;
                border: none;
                border: 1px solid #dfdfdf;
                margin-right: 10px;

                // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
                /deep/ span {
                    // color: #000;
                    font-size: 14px;
                    font-weight: 500;
                }

                &:hover {
                    background-color: #f3f4f6;
                    color: #4b5563;
                }
            }
        }
    }
}
</style>

<style lang="less">
.select-color{
    background-color: #DCDFE6 !important;
}
@media screen and (max-width: 1270px) {
    .HomePage {
        overflow: auto !important;
    }
    .All-Box {
        flex-direction: column !important;
        min-width: 750px !important;
        overflow: auto !important;
    }

    .ShowBox {
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    #main-box{
        max-width: 100% !important;
    }

    .EditBox {
        max-width: 100% !important;
    }
}
</style>
